<!doctype html>
<html lang="en">
<head>
	<title>Runing Game</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<link rel=stylesheet href="css/styles.css"/>
</head>
<body>

<script src="js/Three.js"></script>
<script src="js/Detector.js"></script>
<script src="js/stats.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/THREEx.KeyboardState.js"></script>
<script src="js/THREEx.FullScreen.js"></script>
<script src="js/THREEx.WindowResize.js"></script>

<!-- jQuery code to display an information button and box when clicked. -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel=stylesheet href="css/jquery-ui.css" />
<link rel=stylesheet href="css/info.css"/>
<script src="js/info.js"></script>
<div id="infoButton"></div>
<div id="infoBox" title="Demo Information">
	Movement controls: <br/>
	<ul>
		<li>W/S: Translate Forward/Backward
		<li>A/D: Rotate Left/Right
		<li>Q/E: Translate Left/Right
		<li>R/F: Rotate Up/Down
		<li>Z: Reset position and rotation.
	</ul>
</div>
<!-- ------------------------------------------------------------ -->

<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>
<script>


	// MAIN

	// standard global variables
	var container, scene, camera, renderer, controls, stats;
	var keyboard = new THREEx.KeyboardState();
	var clock = new THREE.Clock();
	// custom global variables
	var cube;

	init();
	animate();

	// FUNCTIONS
	function init()
	{
		// SCENE
		scene = new THREE.Scene();
		// CAMERA
		var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
		var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
		camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
		scene.add(camera);
		camera.position.set(0,150,400);
		camera.lookAt(scene.position);
		// RENDERER
		if ( Detector.webgl )
			renderer = new THREE.WebGLRenderer( {antialias:true} );
		else
			renderer = new THREE.CanvasRenderer();
		renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
		container = document.getElementById( 'ThreeJS' );
		container.appendChild( renderer.domElement );
		// EVENTS
		THREEx.WindowResize(renderer, camera);
		THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });

		// CONTROLS
		// MUST REMOVE THIS LINE!!!
		// controls = ...

		// STATS
		stats = new Stats();
		stats.domElement.style.position = 'absolute';
		stats.domElement.style.bottom = '0px';
		stats.domElement.style.zIndex = 100;
		container.appendChild( stats.domElement );
		// LIGHT
		var light = new THREE.PointLight(0xffffff);
		light.position.set(0,250,0);
		scene.add(light);
		// FLOOR
		var floorTexture = new THREE.ImageUtils.loadTexture( 'images/grass.png' );
		floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
		floorTexture.repeat.set( 100, 100 );
		var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
		var floorGeometry = new THREE.PlaneGeometry(10000, 10000, 10, 10);
		var floor = new THREE.Mesh(floorGeometry, floorMaterial);
		floor.position.y = -0.5;
		floor.rotation.x = Math.PI / 2;
		scene.add(floor);
		// SKYBOX/FOG
		var skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
		var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff, side: THREE.BackSide } );
		var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
		// scene.add(skyBox);
		scene.fog = new THREE.FogExp2( 0xffffff, 0.00025 );

		////////////
		// CUSTOM //
		////////////

		// create an array with six textures for a cool cube
		var materialArray = [];
		materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/xpos.jpeg' ) }));
		materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/xneg.jpeg' ) }));
		materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/ypos.jpeg' ) }));
		materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/yneg.png' ) }));
		materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/zpos.jpeg' ) }));
		materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/zneg.png' ) }));
		var MovingCubeMat = new THREE.MeshFaceMaterial(materialArray);
		var MovingCubeGeom = new THREE.CubeGeometry( 25, 25, 25, 1, 1, 1, materialArray );
		MovingCube = new THREE.Mesh( MovingCubeGeom, MovingCubeMat );
		MovingCube.position.set(0, 25.1, 0);
		scene.add( MovingCube );

	}

	var MovingCube;

	function animate()
	{
		requestAnimationFrame( animate );
		render();
		update();
	}

	function update()
	{
		var delta = clock.getDelta(); // seconds.
		var moveDistance = 200 * delta; // 200 pixels per second
		var rotateAngle = Math.PI / 2 * delta;   // pi/2 radians (90 degrees) per second

		// local transformations

		// move forwards/backwards/left/right
		if ( keyboard.pressed("W") )
			MovingCube.translateZ( -moveDistance );
		if ( keyboard.pressed("S") )
			MovingCube.translateZ(  moveDistance );
		if ( keyboard.pressed("Q") )
			MovingCube.translateX( -moveDistance );
		if ( keyboard.pressed("E") )
			MovingCube.translateX(  moveDistance );

		// rotate left/right/up/down
		var rotation_matrix = new THREE.Matrix4().identity();
		if ( keyboard.pressed("A") )
			MovingCube.rotateOnAxis( new THREE.Vector3(0,1,0), rotateAngle);
		if ( keyboard.pressed("D") )
			MovingCube.rotateOnAxis( new THREE.Vector3(0,1,0), -rotateAngle);
		if ( keyboard.pressed("R") )
			MovingCube.rotateOnAxis( new THREE.Vector3(1,0,0), rotateAngle);
		if ( keyboard.pressed("F") )
			MovingCube.rotateOnAxis( new THREE.Vector3(1,0,0), -rotateAngle);

		if ( keyboard.pressed("Z") )
		{
			MovingCube.position.set(0,25.1,0);
			MovingCube.rotation.set(0,0,0);
		}

		var relativeCameraOffset = new THREE.Vector3(0,50,200);

		var cameraOffset = relativeCameraOffset.applyMatrix4( MovingCube.matrixWorld );

		camera.position.x = cameraOffset.x;
		camera.position.y = cameraOffset.y;
		camera.position.z = cameraOffset.z;
		camera.lookAt( MovingCube.position );

		//camera.updateMatrix();
		//camera.updateProjectionMatrix();

		stats.update();
	}

	function render()
	{
		renderer.render( scene, camera );
	}

</script>

</body>
</html>